<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=UTF-8>
  <mate name=referrer content=never>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta http-equiv=X-UA-Compatible content="ie=edge">
    <title>Document</title>
    <link rel=stylesheet href=../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css>
    <link rel=stylesheet href=../css/base.css>
    <link rel=stylesheet href=../css/list.css>
    <link rel=stylesheet href=../tools/jquery-pagination/pagination.css>
    <style>
      .breadcrumb {
        padding-left: 6px;
        padding-right: 6px
      }

      .box {
        width: 800px;
        margin: 100px auto
      }
      h1 {
            background-color: #fff;
            display: flex;
            height:30px ;
            line-height: 30px;
        }

        h1>i {
            flex: 78%
        }

        h1>a{
            border: 0;
            background-color: #fff;
            flex: 5%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>a:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>a:active{
            background-color: #fff;
            text-decoration: none;
        }
        h1>button{
            border: 0;
            background-color: #fff;
            flex: 6%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>button:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>button:active{
            background-color: #fff;
            text-decoration: none;
        }
    </style>
  </mate>
</head>

<body>
  <h1><i></i> <a href=./reg.html role=button>注册</a>
    <a href=JavaScript:; name=login role=button>登录</a>
    <button name=logout role=button>退出登录</button>
    <button name=cart role=button>购物车</button>
</h1>
  <div class=pagi></div>
  <div class=container>
    <ul></ul>
  </div>
  <div class="box m-style"></div>
  <script src=../js/jquery.min.js></script>
  <script src=../js/tools.js></script>
  <script src=../tools/jquery-pagination/jquery.pagination.js></script>
  <script src="../js/cookie.js"></script>
  <script>const urlObj = getUrlVal();
    console.log(urlObj);
    let page = 1;
    let line = 8;

    setPage();
    const cookieObj = myGetCookie();
        $('[name="logout"]').click(function () {
            if (cookieObj.login === undefined) {
                window.alert('对不起您还没登陆');
            } else {
                mySetCookie('login', 1, -1, '/');
                window.alert('您已经成功退出登录');
            }
        });

        $('[name="cart"]').click(function () {
            if (cookieObj.login === undefined) {
                if (window.confirm('您还没登陆，点击跳转登录')) {
                    window.location.href = './login.html';
                }
            } else {
                window.location.href = './cart.html';
            }
        });
        $('[name="login"]').click(function () {
            window.location.href = `./login.html?url=${window.location.href}`;
        })

    function setPage() {
      const p = new Promise(function (f, r) {
        $.ajax({
          url: '../server/goods_list.php',
          type: 'get',
          data: { cat_one_id: urlObj.cat_one_id, page, line },
          dataType: 'json',
          success: f,
          error: r,
        })
      })
      p.then(function (res) {
        console.log(res);
        str = '';
        res.data.forEach(item => {
          str += `
          <li class="list-item">
          <div class="panel panel-primary">
            <div class="panel-body">
              <ol class="breadcrumb">
                <li><a href="#">${item.cat_one_id}</a></li>
                <li><a href="#">${item.cat_two_id}</a></li>
                <li class="active">${item.cat_three_id}</li>
              </ol>
            </div>
            <div class="panel-footer">
              <div class="row">
                <div class="">
                  <div class="thumbnail">
                    <img src="${item.goods_big_logo}" alt="...">
                    <div class="caption">
                      <h3>${item.goods_name}</h3>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <p class="check"><a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                        <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
          `;
        })
        $('.container ul').html(str);

        $('.box').pagination({
          pageCount: res.sumPage,
          totalData: res.row,
          current: res.page,
          showData: res.line,
          prevCls: 'prev',
          nextCls: 'next',
          prevContent: '上一页',
          nextContent: '下一页',
          activeCls: 'active',
          mode: 'fixed',
          count: 4,
          coping: true,
          homePage: '首页',
          endPage: '末页',
          inHide: true,
          // keepShowPN:false,
          jump: true,
          jumpIptCls: 'jump-ipt',
          jumpBtnCls: 'jump-btn',
          jumpBtn: 'go',
          callback: function (val) {
            page = val.getCurrent();
            setPage();

          }
        });


      })
    }</script>
</body>

</html>